要在React全家桶中应用ant design的步骤

发表于 | 分类于

搭建react框架的教程是：从零搭建React全家桶教程，应用ant design需要在安装后更改一些配置。

  1. webpack.dev.config.js中

    1
    2
    3
    4
    5
    6
    7
    module: {
            rules: [{
                test: /\.css$/,
                // use: ["style-loader", "css-loader?modules&localIdentName=[local]-[hash:base64:5]", "postcss-loader"] //把这句话中的参数去掉
                use: ["style-loader", "css-loader", "postcss-loader"]
            }]
        },

  2. .babelrc中添加

    1
    2
    3
    "plugins": [
       ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
     ]

  3. webpack.config.js中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module: {
            rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    // use: ["css-loader?modules&localIdentName=[local]-[hash:base64:5]", "postcss-loader"] //也把这句话中的参数去掉
                    use: ["css-loader", "postcss-loader"]
                })
            }]
        },